<template>
  <div class="app-container">
    <el-row>
      <el-col :span="18">
        <div>
          <tree-chart :json="treeData" style="margin: auto;" @click-node="nodeClick"></tree-chart>
        </div>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card" style="height: 800px">
          <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="家系名称" prop="sourceCode">
                <span>{{ familyName }}</span>
              </el-form-item>
              <el-form-item label="临床病症" prop="sourceCode">
                <span>{{ familyClinical }}</span>
              </el-form-item>
              <el-form-item label="样本源编号" prop="sourceCode">
                <el-input v-model="form.sourceCode"></el-input>
              </el-form-item>
              <el-form-item label="样本源名称" prop="sourceName">
                <el-input v-model="form.sourceName"></el-input>
              </el-form-item>
              <el-form-item label="样本源性别" prop="sourceSex">
                <el-radio-group v-model="form.sourceSex">
                  <el-radio label="0">男</el-radio>
                  <el-radio label="1">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form.familySourceId">
                <el-form-item label="新增父样本源">
                  <el-tag
                    v-for="source in [form.parentSource]"
                    v-if="form.parentSource"
                    :key="source.familySourceId"
                    :closable="false"
                    :disable-transitions="false"
                    @close="deleteRelate(0, source)"
                  >
                    {{ source.sourceName }}
                  </el-tag>
                  <el-button v-if="!form.parentSource || Object.keys(form.parentSource).length === 0"
                             class="button-new-tag" size="small" @click="addRelate(0)"
                  >+ 新增
                  </el-button>
                </el-form-item>
                <el-form-item label="新增子样本源">
                  <el-tag
                    v-for="source in form.children"
                    v-if="form.children.length > 0"
                    :key="source.familySourceId"
                    :disable-transitions="false"
                    closable
                    @close="deleteRelate(1, source)"
                  >
                    {{ source.sourceName }}
                  </el-tag>
                  <el-button class="button-new-tag" size="small" @click="addRelate(1)">+ 新增</el-button>
                </el-form-item>
                <el-form-item label="新增配偶样本源">
                  <el-tag
                    v-for="source in form.mate"
                    v-if="form.mate.length > 0"
                    :key="source.familySourceId"
                    :disable-transitions="false"
                    closable
                    @close="deleteRelate(2, source)"
                  >
                    {{ source.sourceName }}
                  </el-tag>
                  <el-button class="button-new-tag" size="small" @click="addRelate(2)">+ 新增</el-button>
                </el-form-item>
              </div>
              <el-form-item label="是否死亡" prop="sourceDead">
                <el-radio-group v-model="form.sourceDead">
                  <el-radio label="0">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否患者" prop="sourcePatient">
                <el-radio-group v-model="form.sourcePatient">
                  <el-radio label="0">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否携带" prop="sourceCarry">
                <el-radio-group v-model="form.sourceCarry">
                  <el-radio label="0">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-top: 32px">
                <el-button v-if="!form.familySourceId" type="primary" @click="createSource">创建</el-button>
                <el-button v-else type="primary" @click="updateSource">更新</el-button>
                <el-button @click="deleteSource">删除</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="open" append-to-body width="700px">
      <el-form ref="relateForm" :model="relateForm" :rules="rules" label-width="100px">
        <el-form-item label="样本源编号" prop="sourceCode">
          <el-input v-model="relateForm.sourceCode"></el-input>
        </el-form-item>
        <el-form-item label="样本源名称" prop="sourceName">
          <el-input v-model="relateForm.sourceName"></el-input>
        </el-form-item>
        <el-form-item label="样本源性别" prop="sourceSex">
          <el-radio-group v-model="relateForm.sourceSex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否死亡" prop="sourceDead">
          <el-radio-group v-model="relateForm.sourceDead">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否患者" prop="sourcePatient">
          <el-radio-group v-model="relateForm.sourcePatient">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否携带" prop="sourceCarry">
          <el-radio-group v-model="relateForm.sourceCarry">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRelateForm">确 定</el-button>
        <el-button @click="cancelRelate">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TreeChart from '@/components/TreeChart'
import { getFamilyMap } from '@/api/biobank/family'
import {
  addFamilySource,
  addRelateSource,
  delFamilySource,
  delRelateSource,
  getFamilySource,
  updateFamilySource
} from '@/api/biobank/familySource'

export default {
  name: 'Family',
  components: {
    TreeChart
  },
  data() {
    return {
      treeData: {},
      // 添加关联样本源 对话框
      open: false,
      // 添加关联样本源 对话框标题
      title: '',
      form: {},
      // 添加关联样本源表单
      relateForm: {},
      // 表单校验
      rules: {
        sourceName: { required: true, trigger: 'blur', message: '样本源名称不能为空' },
        sourceSex: { required: true, trigger: 'change', message: '样本源性别不能为空' },
        sourceDead: { required: true, trigger: 'change', message: '是否死亡不能为空' },
        sourcePatient: { required: true, trigger: 'change', message: '是否患者不能为空' },
        sourceCarry: { required: true, trigger: 'change', message: '是否携带不能为空' }
      },
      familyId: undefined,
      familyName: undefined,
      familyClinical: undefined
    }
  },
  created() {
    this.familyId = this.$route.query && this.$route.query.familyId
    this.familyName = this.$route.query && this.$route.query.familyName
    this.familyClinical = this.$route.query && this.$route.query.familyClinical
    this.getMap()
  },
  methods: {
    // 获取家系图谱
    getMap() {
      getFamilyMap(this.familyId).then(response => {
        this.treeData = response.data
      })
    },
    // 新增样本源
    createSource() {
      this.form.familyId = this.familyId
      addFamilySource(this.form).then(response => {
        this.$message.success('新增样本源成功')
        this.reset()
        this.getMap()
      })
    },
    // 删除样本源
    deleteSource() {
      this.$confirm('是否确认删除样本源', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFamilySource(this.form.familySourceId)
      }).then(response => {
        this.$message.success('删除样本源成功')
        this.reset()
        this.getMap()
      })
    },
    // 更新样本源
    updateSource() {
      updateFamilySource(this.form).then(response => {
        this.$message.success('更新样本源成功')
        this.reset()
        this.getMap()
      })
    },
    // 家系图谱点击事件
    nodeClick(data) {
      this.reset()
      getFamilySource(data.familySourceId).then(response => {
        this.form = response.data
      })
    },
    // 新增关联样本源
    addRelate(type) {
      this.resetRelate()
      let title
      this.relateForm.type = type
      switch (type) {
        case 0:
          // 新增父样本源
          this.relateForm.familySourceCid = this.form.familySourceId
          title = '新增父样本源'
          break
        case 1:
          // 新增子样本源
          this.relateForm.familySourcePid = this.form.familySourceId
          title = '新增子样本源'
          break
        case 2:
          // 新增配偶样本源
          this.relateForm.familySourceMid = this.form.familySourceId
          title = '新增配偶样本源'
          break
      }
      this.title = title
      this.open = true
    },
    // 删除关联样本源
    deleteRelate(type, source) {
      source.type = type
      this.$confirm('是否确认取消关联样本源', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRelateSource(source)
      }).then(response => {
        this.$message.success('取消关联样本源成功')
        this.reset()
        this.getMap()
      })
    },
    // 关联样本源对话框 确定按钮点击事件
    submitRelateForm() {
      this.relateForm.familyId = this.familyId
      addRelateSource(this.relateForm).then(response => {
        this.$message.success('新增成功')
        this.getMap()
        this.open = false
      })
    },
    // 关联样本源对话框 取消按钮点击事件
    cancelRelate() {
      this.open = false
      this.resetRelate()
    },
    resetRelate() {
      this.relateForm = {
        sourceCode: undefined,
        sourceName: undefined,
        sourceSex: undefined,
        sourceDead: undefined,
        sourcePatient: undefined,
        sourceCarry: undefined
      }
      this.resetForm('relateForm')
    },
    reset() {
      this.form = {
        familySourceId: undefined,
        sourceCode: undefined,
        sourceName: undefined,
        sourceSex: undefined,
        sourceDead: undefined,
        sourcePatient: undefined,
        sourceCarry: undefined,
        parentSource: undefined,
        children: undefined,
        mate: undefined
      }
      this.resetForm('form')
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
</style>
